<template>
  <div>
    <div class="search">
      <el-input placeholder="请输入规格名称查询" style="width: 200px" v-model="name"></el-input>
      <el-input placeholder="请输入最小价格" style="width: 200px; margin-left: 10px" v-model="minPrice"></el-input>
      ——
      <el-input placeholder="请输入最大价格" style="width: 200px" v-model="maxPrice"></el-input>
      <el-input placeholder="请输入最小出售数量" style="width: 200px; margin-left: 10px" v-model="minNumber"></el-input>
      ——
      <el-input placeholder="请输入最大出售数量" style="width: 200px" v-model="maxNumber"></el-input>
      <el-select v-model="state" placeholder="请选择上架状态" style="margin-left: 10px">
        <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
    </div>

    <div class="operation">
      <el-button type="primary" plain @click="handleAdd">新增</el-button>
    </div>

    <div class="table">
      <el-table :data="tableData" strip @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" width="70" align="center" sortable>
          <template #default="{ row, $index }">
            {{ $index + 1 }} <!-- 这里是序号从1开始 -->
          </template>
        </el-table-column>
        <el-table-column prop="itemId" label="商品编号"></el-table-column>
        <el-table-column label="商品图片">
          <template v-slot="scope">
            <div style="display: flex; align-items: center">
              <el-image style="width: 60px; height: 60px; border-radius: 80%"
                        :src="scope.row.productImageUrl || defaultImageUrl"
                        :preview-src-list="[scope.row.productImageUrl || defaultPreviewUrl]"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品详细图片" width="100">
          <template v-slot="scope">
            <div>
              <el-image
                  style="width: 60px; height: 60px; border-radius: 4px;"
                  :src="parseImageUrls(scope.row.imageUrl)[0] || defaultImageUrl"
                  :preview-src-list="parseImageUrls(scope.row.imageUrl)">
              </el-image>
              <el-button type="text" @click="previewAllImages(parseImageUrls(scope.row.imageUrl))" v-if="parseImageUrls(scope.row.imageUrl).length > 1">
                查看所有图片
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="规格名称"></el-table-column>
        <el-table-column prop="price" label="商品价格"></el-table-column>
        <el-table-column prop="illustrate" label="说明"></el-table-column>
        <el-table-column prop="soldNumber" label="出售数量"></el-table-column>
        <el-table-column prop="state" label="商品状态" :formatter="formatState"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="createUserName" label="创建人"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间"></el-table-column>
        <el-table-column prop="updateUserName" label="修改人"></el-table-column>
        <el-table-column label="操作" align="center" width="145">
          <template v-slot="scope">
            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" plain @click="del(scope.row.id)"  v-if="scope.row.username != 'admin'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>


    <el-dialog title="商品规格" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close @close="handleCancel">
      <el-form :model="form" label-width="100px" style="padding-right: 50px" ref="formRef" :rules="rules">
        <el-form-item label="商品名称">
          <el-select v-model="form.productId" placeholder="请选择商品">
            <el-option
                v-for="(product, index) in productsData"
                :key="product.id + '-' + index"
                :label="product.name"
                :value="product.id">
            </el-option>
          </el-select>
        </el-form-item>
                <el-form-item label="规格名称" prop="name">
                  <el-input v-model="form.name" placeholder="规格名称" :maxlength="50"></el-input>
                </el-form-item>
        <el-form-item label="规格状态" prop="state">
          <el-select v-model="form.state" placeholder="请选择规格状态" >
            <el-option label="未上架" :value="1"></el-option>
            <el-option label="已上架" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="form.price" placeholder="商品价格"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="illustrate">
          <el-input v-model="form.illustrate" placeholder="说明" ></el-input>
        </el-form-item>
        <el-form-item label="详情图片">
          <el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/admin/api/photo/upload'"
              :headers="{ authentication: user.token }"
              :data="{ imageType: 'AVATAR'}"
              list-type="picture"
              :on-success="handleAvatarSuccess"
              :file-list="fileList"
              :on-remove="handleAvatarRemove"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看图片" :visible.sync="imageDialogVisible" width="50%">
      <div style="display: flex; flex-wrap: wrap;">
        <el-image
            v-for="(url, index) in previewImages"
            :key="index"
            style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px;"
            :src="url"
            :preview-src-list="previewImages">
        </el-image>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="imageDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Product",
  data() {
    return {
      //默认图片
      defaultImageUrl: 'https://img0.baidu.com/it/u=2991630058,871933297&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300',
      //默认预览
      defaultPreviewUrl: 'https://img0.baidu.com/it/u=2594677340,3536341249&fm=253&fmt=auto&app=138&f=JPG?w=240&h=240',
      imageDialogVisible: false, // 控制图片预览对话框的显示
      previewImages: [], // 预览的所有图片
      tableData: [],  // 所有的数据
      productsData: [], //分类信息
      fileList: [], //详细图片
      stateOptions: [
        { value: 0, label: '已上架' },
        { value: 1, label: '未上架' }
      ],
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,
      name: null,
      state:null,
      minPrice: null,
      maxPrice: null,
      minNumber: null,
      maxNumber: null,
      fromVisible: false,
      form: {
      },
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      ids: [],
      rules: {
        name: [
          {required: true, message: '请输入规格名称', trigger: 'blur'},
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error('价格不能为负'));
              } else {
                callback();
              }
            }, trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '价格必须由0-9的数字组成', trigger: 'blur' },
        ]

      },
    }
  },
  created() {
    this.load(1)
  },
  methods: {
    previewAllImages(urls) {
      if (urls && urls.length > 0) {
        this.previewImages = urls;
        this.imageDialogVisible = true;
      }
    },
    parseImageUrls(jsonString) {
      try {
        const urls = JSON.parse(jsonString);
        if (Array.isArray(urls)) {
          return urls;
        }
        return [];
      } catch (error) {
        console.error("Error parsing image URLs:", error);
        return [];
      }
    },
    generateItemId() {
      // 获得年+月+日+时+分+秒
      const now = new Date();
      const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以+1
      const day = now.getDate().toString().padStart(2, '0');
      const min = 10001; // Java Integer 最小值
      const max = 99999;  // Java Integer 最大值
      // 生成一个介于 min 和 max 之间的随机整数
      const randomId = Math.floor(Math.random() * (max - min + 1)) + min;
      return `${month}${day}${randomId}`;
    },
    formatState(row, column, cellValue) {
      // 根据state的值返回相应的文本
      return cellValue === 1 ? '未上架' : '已上架';
    },
    handleAdd() {   // 新增数据
      this.fileList = []
      this.form = {
        imageUrls:[],
        state: 1, //状态默认为未上架
        itemId: this.generateItemId()
      }
      this.fromVisible = true   // 打开弹窗
    },
    handleCancel(){
      this.fileList = [];
      this.form.imageUrls = [];
      this.fromVisible = false
    },
    handleEdit(row) {   // 编辑数据
      this.fileList = []
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.form = {
        ...this.form,
        imageUrls: [], // 初始化imageUrls为空数组
      }

      if (typeof this.form.imageUrl === 'string') {
        try {
          // 尝试解析JSON字符串
          const imageUrlArray = JSON.parse(this.form.imageUrl);
          this.form.imageUrls = imageUrlArray;
          // 检查解析后的结果是否是一个数组
          if (Array.isArray(imageUrlArray)) {
            this.fileList = imageUrlArray.map((url, index) => ({
              name: `image-${index}`,
              url: url
            }));
            this.form.imageUrls = imageUrlArray; // 将解析后的数组赋值给imageUrls
          } else {
            this.fileList = [];
            this.form.imageUrls = []; // 确保imageUrls为空数组
          }
        } catch (error) {
          // 如果解析失败，可能是由于JSON格式不正确
          console.error('Error parsing JSON:', error);
          this.fileList = [];
          this.form.imageUrls = []; // 确保imageUrls为空数组
        }
      } else {
        // 如果this.form.imageUrl不是字符串，则不处理
        this.fileList = [];
        this.form.imageUrls = []; // 确保imageUrls为空数组
      }
      this.fromVisible = true   // 打开弹窗
    },

    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
      // 在保存时，根据fileList更新imageUrls
      this.form.imageUrls = this.fileList.map(file => {
        // 如果是刚上传的文件，使用response中的data，否则使用原来的url
        return file.response ? file.response.data : file.url;
      });
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$request({
            url: this.form.id ? '/admin/api/specifications/update' : '/admin/api/specifications/add',
            method: this.form.id ? 'PUT' : 'POST',
            data: this.form
          }).then(res => {
            if (res.code === 0) {  // 表示成功保存
              this.$message.success('保存成功')
              this.load(1)
              this.fromVisible = false
            } else {
              this.$message.error(res.msg)  // 弹出错误的信息
              console.log(res)
            }
          })
        }
      })
    },
    del(id) {   // 单个删除
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/admin/api/specifications/delete/' + id).then(res => {
          if (res.code === 0) {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)
    },
    load(pageNum) {  // 分页查询
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/admin/api/specifications/pages', {
        params: {
          current: this.pageNum,
          size: this.pageSize,
          name: this.name,
          state: this.state,
          minPrice: this.minPrice,
          maxPrice: this.maxPrice,
          minNumber: this.minNumber,
          maxNumber: this.maxNumber
        }
      }).then(res => {
        this.tableData = res.records
        this.total = res.total
      })
      this.$request.get('/admin/api/product/pages', {
      }).then(res => {
        this.productsData = res.records
      })
    },
    reset() {
      this.name = null
      this.state = null
      this.minPrice = null
      this.maxPrice = null
      this.minNumber = null
      this.maxNumber = null
      this.load(1)
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    handleAvatarSuccess(response, file, fileList) {
      // 定义一个正则表达式来匹配允许的文件扩展名
      const allowedExtensions = /.(png|jpg|jpeg)$/i;

      // 检查文件扩展名是否为允许的格式
      if (!allowedExtensions.test(file.name)) {
        // 如果文件扩展名不允许，从fileList中移除
        this.fileList = fileList.filter(f => f.uid !== file.uid);
        // 发出提示
        this.$message.error('只能上传png, jpg, jpeg格式的图片！');
        return; // 不进行后续操作
      }
      // 把头像属性换成上传的图片的链接
      this.form.imageUrls.push(response.data);
      // 更新fileList以反映最新的文件列表
      this.fileList = fileList;
    },
    handleAvatarRemove(file, fileList) {
      // 把头像属性删除时删除图片链接
      this.form.imageUrls = this.form.imageUrls.filter(url => url !== file.url);
      // 当点击X时，不立即删除，而是记录下来
      this.fileList = fileList; // 更新fileList
      // 找到并删除对应的URL
      this.form.imageUrls = this.form.imageUrls.filter(url => {
        return !fileList.some(f => f.response && f.response.data === url);
      });
    },
  }
}
</script>

<style scoped>

</style>